<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layout</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
	<script type="text/javascript" 
	src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
	<script type="text/javascript" 
	src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
	<!-- 引入ztree资源文件 -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>
	 <script type="text/javascript">
            function addTabs() {
				//添加选项卡
				$("#tabs").tabs("add",{
					iconCls:'icon-cancel',
					closable:'true',
					title:'百度',
					content:'<iframe frameborder="0" width="100%" height="100%" src="http://wwww.baidu.com"></iframe>'
				});
			}
      </script>
      
      <script type="text/javascript">
      
	      <!-- 创建ztree树   使用js构造树-->
	      var setting = {};
	      <!-- 构造json数据 -->
	      var zNodes = [
			        {name:'节点一',children:[
					        	{name:'节点11',children:[
											{name:'节点111'},				        		
											{name:'节点112'},				        		
											{name:'节点113'},				        		
					        		]},
					        	{name:'节点12'},
					        	{name:'节点13'},
			        	]},
			        {name:'节点二'},
			        {name:'节点三'}
	      ];
	      <!-- 初始化树 -->
	      $(function(){
	        $.fn.zTree.init($("#myztree"),setting,zNodes);
	      });
      </script>
      
      <script type="text/javascript">
        var setting2 = {
        		data:{
        			simpleData:{
        				enable:true
        			}
        		},
        		callback:{
        			onClick:onClick
        		}
        };
        
        var zNodes2 = [
        	{ id:1, pId:0, name:"节点1", open:true},
			{ id:11, pId:1, name:"节点11"},
			{ id:111, pId:11, name:"节点111"},
			{ id:112, pId:11, name:"节点112"},
			{ id:113, pId:11, name:"节点113",page:''},
			{ id:114, pId:11, name:"百度",page:'http://www.baidu.com'}
        ];
        
        $(function(){
	        $.fn.zTree.init($("#myztree2"),setting2,zNodes2);
	      });
        
        function onClick(event,treeId,treeNode,clickFlag){
       	 var page = treeNode.page;
				if(page != undefined){
					//判断当前选项卡是否存在
					var ex = $("#tabs").tabs("exists",treeNode.name);
					if(ex){
						//已经存在，选中选项卡
						$("#tabs").tabs("select",treeNode.name);
					}else{
						//不存在，添加
						//动态添加选项卡面板
						$("#tabs").tabs("add",{
							closable:true,
							title:treeNode.name,
							content:'<iframe frameborder="0" width="100%" height="100%" src="'+page+'"></iframe>'
						});
					}
				}
        }
      </script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',title:'宅急送后台管理系统'" style="height:150px">
        <h1 style="color: pink" align="center">欢迎来到宅急送后台管理系统</h1>
    </div>
    <div data-options="region:'west',title:'系统菜单'" style="width:200px">
      <div class="easyui-accordion" data-options="fit:true">
        <div title="面板一" data-options="iconCls:'icon-search'">
          <a onclick="addTabs();" id="baidulink" class="easyui-linkbutton">度娘虐你千百遍</a>
        </div>
        <div title="面板二">
           <ul id="myztree" class="ztree"></ul>
        </div>
        <div title="面板三">
           <ul id="myztree2" class="ztree"></ul>
        </div>
      </div>
    </div>
    <div data-options="region:'center'" >
      <!-- 选项卡面板 -->
      <div id="tabs" class="easyui-tabs" data-options="fit:true">
        <div title="选项卡一" data-options="closable:true,iconCls:'icon-reload'"></div>
        <div title="选项卡二" data-options="closable:true,iconCls:'icon-cut'"></div>
        <div title="选项卡三" data-options="closable:true,iconCls:'icon-ok'"></div>
      </div>
    </div>
    <div data-options="region:'south'" style="height:80px">南部</div>
</body>
</html>